import loadingUrl from '@/assets/image/loading.svg';
import styles from './loading.module.less';
// 得到el中loading效果的img元素
function getLoadingImg(el) {
    return el.querySelector('img[data-role=loading]')
}

function createLoadingImg() {
    const img = document.createElement('img');
    img.dataset.role = 'loading';
    img.src = loadingUrl;
    img.className = styles.loading;
    return img;
}
// 导出指令的配置对象
export default function (el, binding) {
    // 根据 binding.value的值，决定创建或者删除img元素
    const curImg = getLoadingImg(el);
    if (binding.value) {
        // 如果当前没有img，就创建一个
        if (!curImg) {
            const img = createLoadingImg();
            el.appendChild(img)
            // console.log(el)
        }
    } else {
        if (curImg) {
            curImg.remove();
        }
    }
}
// 此代码和下面的效果等同
/* export default {
    bind(el,binding){
        // 根据 binding.value的值，决定创建或者删除img元素
        console.log('bind')
    },
    update(el,binding){
        // 根据 binding.value的值，决定创建或者删除img元素
        console.log('update')
    }
} */


